<!DOCTYPE html>
<html lang="zh">
<head>
    <:include file="../../common/css.html" title="水印组件"/>
</head>
<body class="pear-container">
    <div class="layui-row layui-col-space10">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">开发环境</div>
                <div class="layui-card-body">
                    watermark 用于水印叠加
                </div>
            </div>
        </div>
        <div class="layui-col-md12">
            <div class="layui-collapse">
                <div class="layui-colla-item">
                    <h2 class="layui-colla-title">显示代码</h2>
                    <div class="layui-colla-content">
                        <pre class="layui-code" lay-encode="true">
<link rel="stylesheet" href="/assets/component/pear/css/pear.css"/>
 并
<script src="/assets/component/layui/layui.js"></script>
 并
<script src="/assets/component/pear/pear.js"></script>
                        </pre>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">水印创建</div>
                <div class="layui-card-body">
                    <button class="btntype1 pear-btn pear-btn-primary">单行水印</button>
                    <button class="btntype2 pear-btn pear-btn-danger">多行水印</button>
                    <button class="btntype3 pear-btn pear-btn-warming">叠加目标</button>
                </div>
            </div>
        </div>
        <div class="layui-col-md12">
            <div class="layui-collapse">
                <div class="layui-colla-item">
                    <h2 class="layui-colla-title">显示代码</h2>
                    <div class="layui-colla-content">
                                <pre class="layui-code" lay-encode="true">
layui.use(['watermark'], function() {
    var watermark = layui.watermark;

    var mark_node=new watermark({
        content: "单行水印"
    });

    new watermark({
        content: "多行水印1<br>多行水印2",
        height:40
    });

    new watermark({
        content: "指定容器上",
        appendTo:'#water_div',
    });

})
                        </pre>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">指定容器水印</div>
                <div class="layui-card-body">
                    <div id="water_div"
                         style="width: 600px;
                                    height: 300px;
                                    overflow: hidden;
                                    position: relative;
                                    border: 1px solid gainsboro;
                                    background-color: #EEE;
                                    margin-top: 20px;
                                    display: flex;
                                    justify-content: space-around;
                                    align-items: center">

                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">移除水印</div>
                <div class="layui-card-body">
                    <button class="btnclose pear-btn pear-btn-primary">销毁水印</button>
                </div>
            </div>
        </div>
        <div class="layui-col-md12">
            <div class="layui-collapse">
                <div class="layui-colla-item">
                    <h2 class="layui-colla-title">显示代码</h2>
                    <div class="layui-colla-content">
                        <pre class="layui-code" lay-encode="true">
layui.use(['watermark'], function() {
    var popup = layui.popup;
    mark_node.destroy();
})
                        </pre>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 依 赖 脚 本 -->
    <:include file="../../common/js.html" />
    <script>
        layui.use(['watermark', 'jquery', 'code'], function () {
            var popup = layui.popup;
            var $ = layui.jquery;
            var watermark = layui.watermark;
            layui.code({ encode: true  });

            var mark_node = null;

            function remove_water_marker() {
                mark_node && mark_node.destroy();
                mark_node = null;
            }


            $(".btntype1").click(function () {
                remove_water_marker();
                mark_node = new watermark({
                    content: "单行水印"
                });
            })
            $(".btntype2").click(function () {
                remove_water_marker();
                mark_node = new watermark({
                    content: "多行水印1<br>第二行长多行水印2",
                    height: 40
                });
            })
            $(".btntype3").click(function () {
                remove_water_marker();
                mark_node = new watermark({
                    content: "指定目标上",
                    appendTo: '#water_div',
                });
            })
            $(".btnclose").click(function () {
                remove_water_marker();
            })

        })
    </script>
</body>
</html>
